<template>
  <div class="title">{{ examName }}</div>

  <Col class="dropDown" span="8" offset="8" v-show="role === 2">
    <DropdownMenu  active-color="#9caf70" >
      <DropdownItem class="dropMenuItem" v-model="currentStudent" :options="studentOption" title-class="titleClass"/>
    </DropdownMenu>
  </Col>

  <div v-show="role === 3" class="student">{{currentStuInfo.studentName}}的成绩单</div>

  <Grid class="grid" :gutter="20" column-num="3" style="margin-top: 15px">
    <GridItem class="grid-item">
      <div class="grid-value">{{currentStuInfo.totalScore}}</div>
      <div class="grid-title">总成绩</div>
    </GridItem>
    <GridItem class="grid-item">
      <div class="grid-value">{{currentStuInfo.classRank}}</div>
      <div class="grid-title">班级排名</div>
    </GridItem>
    <GridItem class="grid-item">
      <div class="grid-value">{{currentStuInfo.gradeRank}}</div>
      <div class="grid-title">年级排名</div>
    </GridItem>
  </Grid>

  <Divider style="margin-left: 20px;margin-right: 20px;">各科成绩</Divider>

  <CellGroup inset border >
    <Cell title="语文" :value="currentStuInfo.chinese" class="cell"/>
    <Cell title="数学" :value="currentStuInfo.math" class="cell" />
    <Cell title="英语" :value="currentStuInfo.english" class="cell"/>
  </CellGroup>

</template>


<script setup name="ScoresParStuDetail">
import {Col, DropdownItem, DropdownMenu, Grid, GridItem, Divider, Cell, CellGroup} from 'vant'
import {onMounted, reactive, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {getStuByParId, getStuByStuId} from "@/v-api/school/scores";
import {Local} from "@/utils/storage";

const route = useRoute();
const examName = ref('');
const currentStudent = ref(0);
const studentOption = ref([])
const details = ref([])
const role = Local.get('userInfo').role;

examName.value = route.query.examName;

onMounted(async ()=>{
  const userId = Local.get('userInfo').userId;
  const examId = route.query.examId;
  try {
    if(role === 2){ //家长
      details.value = (await getStuByParId(userId, examId)).data;
      if(details.value.length > 0){
        studentOption.value = details.value.map((student,index) =>({
          text: student.studentName,value:index }));
        currentStuInfo.value = details.value[0];
      }
    }
    if(role === 3){ //学生
      const detail = await getStuByStuId(examId);
      details.value[0] = detail;
      if(details.value.length === 1){
        currentStuInfo.value = details.value[0];
      }
    }
  } catch (error) {
    console.error('Failed to fetch scores:', error);
    // 错误处理逻辑
  }
});

// 计算属性来获取当前学生的信息
const currentStuInfo =ref([])
if(role === 2){
  currentStuInfo.value = ref(details.value.length ? details.value[currentStudent.value] : {});
}

// 监听currentStudentIndex变化，以更新currentScores
watch(currentStudent, (newIndex) => {
  currentStuInfo.value = details.value[newIndex];
});


</script>


<style scoped>

.title{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 10px;
}


.dropDown{
  margin-top: 20px;
  width: 120px;
  height: 30px;

  :deep(.van-dropdown-menu__bar){
    box-shadow: unset !important;
    background-color:transparent !important;
    height: 28px !important;

  }
  :deep(.van-popup){
    //width: 33% !important;
    //right: 33% !important;
    //left:auto;
    //top: 1px;
  }
  :deep(.titleClass){
    color: #787878 !important;
    font-weight: bold;
  }
  :deep(.van-dropdown-item__content .van-cell__title){
    flex:2 !important;
  }
}


.student{
  text-align: center;
  font-size: 16px;
  color:#787878;
  margin:15px;
  font-weight: bold;
}


.grid-item :deep(.van-grid-item__content){
  //background: linear-gradient(to bottom, #9caf70, #acec24);
  border-radius: 10px;
}
.grid-value{
  font-size: 20px;
  font-weight: bold;
  color:#9caf70;
}
.grid-title{
  font-size: 12px;
  margin-top: 8px;
  color: #8c8c8c;
}


.cell :deep(.van-cell__title){
  font-size: 16px;
  margin-left: 20px;
}
.cell :deep(.van-cell__value){
  font-size: 17px;
  font-weight: bold;
  margin-right: 20px;
  color:#9caf70;
}
</style>
